
import React ,{createRef} from 'react'
import { List, AutoSizer }  from 'react-virtualized'
import NavBar from '../../components/navBar/navBar'
import './city.scss'
import axios from '../../utils/axios'
import {Toast} from 'antd-mobile'
import getLocation from '../../utils/city'
let TITLE_HEIGHT=36
let CITY_HEIGHT=50
export default class City extends React.Component{
    
    constructor(){
        super()
        this.state={
            cityObj:{},
            cityKey:[],
            activeKey:'#'
          }
        this.currentList=createRef()
    }
    rowRenderer=({key,index,isScrolling,isVisible,style})=>{
        let {cityObj,cityKey}=this.state
        let arr =cityObj[cityKey[index]]
         return <div key={key} style={style}>
             <div className='city-key'>{cityKey[index]}</div>
             <div className='city-bael'>
                {arr.map(item=>{
                    return  <div key={item.label} className='city-name' onClick={e=>this.changeCity(item)}>{item.label}</div>
                })}
             </div>
         </div>
    }
    getCity=async ()=>{
        let cityObj={}
        Toast.loading('loading',0)
        let res2=await axios.get('/area/hot')
        let res=await axios.get('/area/city?level=1')
        let local=await getLocation()
       cityObj['当前定位']=[{label:local.label}]
       Toast.hide()
       cityObj['热门城市']=res2.data.body
       for(let item of res.data.body){
            let py=item.pinyin.slice(0,1).toLocaleUpperCase()
            if(py in cityObj){
            cityObj[py].push(item)
            }else{
                cityObj[py]=[item]
            }
       }
       let cityKey=Object.keys(cityObj).sort()
       cityKey=[...cityKey.slice(cityKey.length-2),...cityKey.slice(0,cityKey.length-2)]
       this.setState({
        cityObj,
        cityKey
       })
    }
    setKeys=()=>{
        let {cityKey,activeKey}=this.state
        let keys=[...cityKey]
        keys[0]='#'
        keys[1]='热'
        return  keys.map((item,index)=>{
               return <div  key={item} className='key-item' onClick={e=>this.currentList.current.scrollToRow(index)}>
                   <span className={activeKey===item?'key-active':''}>{item}</span>
                </div>
            })
    }
    setRowHeight=({index})=>{
      let {cityObj,cityKey}=this.state
      return TITLE_HEIGHT+cityObj[cityKey[index]].length*CITY_HEIGHT
    }
    async componentDidMount(){
       await this.getCity()
        // 调用 measureAllRows，提前计算 List 中每一行的高度，实现 scrollToRow 的精确跳转
        this.currentList.current.measureAllRows()
    }
    onRowsRendered=({startIndex})=>{
        let {cityKey,activeKey}=this.state
       if(activeKey!==cityKey[startIndex]){
           this.setState({
            activeKey:cityKey[startIndex]
           })
       }
    }
    changeCity=(city)=>{
        localStorage.setItem('local_city',JSON.stringify(city))
        this.props.history.go(-1)
    }
    render(){
        let {cityKey}=this.state
        return <div className='city'>
            <NavBar>城市选择</NavBar>
            <AutoSizer>
                {({width,height})=>(
                    <List width={width} height={height} scrollToAlignment="start"
                    rowHeight={this.setRowHeight}  ref={this.currentList}  onRowsRendered={this.onRowsRendered}
                    rowCount={cityKey.length} rowRenderer={this.rowRenderer}>
                    </List>
                )}
            </AutoSizer>
            <div className='key'>{this.setKeys()}</div>
        </div>
    }
}